<template>
  <div style="font-size: 12px;line-height: 60px;display: flex">

    <div style="flex: 1 ;font-size: 20px">
      <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>

      <el-breadcrumb separator="/" style="display: inline-block;margin-left: 10px">
        <el-breadcrumb-item :to="{ path: '/userPage' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item >{{ pathName }}</el-breadcrumb-item>
      </el-breadcrumb>

    </div>
    <el-dropdown style="width: 70px;cursor: pointer">
      <div style="display: inline-block">

        <img :src="user.headImage" alt="" style="width: 30px;border-radius: 50%;position: relative;top:10px;right: 30px">
        <span style="right: 50px">{{ user.userName }}</span>

      </div>
      <el-dropdown-menu slot="dropdown" >

        <el-dropdown-item  >
         <span style="text-decoration: none" @click="$router.push('/userPerson')">
<!--           <router-link to="/managerPerson">个人信息</router-link>-->
           个人信息
         </span>

        </el-dropdown-item>
        <el-dropdown-item>
          <span  style="text-decoration: none" @click="logout"> 退出</span></el-dropdown-item>
      </el-dropdown-menu>


    </el-dropdown>
  </div>



</template>

<script>

export default {
  name:"UserHeader",
  props:{
    collapseBtnClass:String,
    collapse:Boolean,

  },
  data(){
    return{
      pathName:'',
      user: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
    }
  },
  watch:{
    '$route':function (){
      this.pathName=localStorage.getItem("currentPathName")
    }
  },
  methods:{
    logout(){
      this.$router.push("/userLogin")
      localStorage.removeItem("user")
      this.$message.success("退出成功")
    },
    toPerson(){
      this.$router.push("/userPerson")
    }
  }

}

</script>